<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <style>
        .container h2 {
            border-bottom: 2px solid #F5F5F5;
            padding-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>Promise初体验</h2>
        <button id="btn">点击抽奖</button>
    </div>
</body>

<script>
    // 生成 [m,n] 随机数
    function randomNum(m, n) {
        return parseInt(Math.random() * (n - m + 1) + m, 10);
    }


    // 获取元素对象
    const btn = document.querySelector('#btn');
    // 绑定单机事件
    btn.addEventListener('click', () => {
        // 第一种方式：定时器回调函数
        // #region
        // setTimeout(() => {
        //     let n = randomNum(1, 100);
        //     if (n <= 30) {
        //         alert('恭喜中奖了！');
        //     } else {
        //         alert('再接再励');
        //     }
        // }, 1000);
        // #endregion

        // 第二种方式：Promise
        // resolve: 解决 函数类型的数据。
        // reject: 拒绝 函数类型的数据。
        const p = new Promise((resolve, reject) => {
            const n = randomNum(1, 100);
            if (n <= 30)
                resolve({ state: true, targetNumber: n });  // 将 Promise 对象的状态设置为成功
            else
                reject({ state: false });                   // 将 Promise 对象的状态设置为失败
        });

        // 调用 then() 函数
        // param1: 接收 resolve() 传过来的数据。
        // param2: 接收 reject() 传过来的数据。
        p.then(ret => {
            console.log(ret);
            alert(`恭喜中奖, 您的中奖数字为 ${ret.targetNumber} !`);
        }, err => {
            console.log(err);
            alert(`再接再厉！`);
        });

    });
</script>

</html>